<div class="tip-wrapper tip-position" [style.width]="maxWidth">
    <clr-tooltip>
        <div clrTooltipTrigger class="tip-block">
            <div
                class="tip-wrapper bar-block-high"
                [style.width]="tipWidth(5)"></div>
            <div
                class="tip-wrapper bar-block-medium"
                [style.width]="tipWidth(4)"></div>
            <div
                class="tip-wrapper bar-block-low"
                [style.width]="tipWidth(3)"></div>
            <div
                class="tip-wrapper bar-block-unknown"
                [style.width]="tipWidth(2)"></div>
            <div
                class="tip-wrapper bar-block-none"
                [style.width]="tipWidth(1)"></div>
        </div>
        <clr-tooltip-content
            [clrPosition]="'right'"
            [clrSize]="'lg'"
            *clrIfOpen>
            <div [ngSwitch]="scanLevel" class="bar-tooltip-font-larger">
                <ng-template [ngSwitchCase]="5">
                    <clr-icon
                        shape="exclamation-circle"
                        class="is-error"
                        size="32"></clr-icon>
                    <span
                        >{{ 'VULNERABILITY.OVERALL_SEVERITY' | translate }}
                        <span class="font-weight-600">{{
                            'VULNERABILITY.SEVERITY.HIGH'
                                | translate
                                | titlecase
                        }}</span></span
                    >
                </ng-template>
                <ng-template [ngSwitchCase]="4">
                    <clr-icon
                        *ngIf="hasMedium"
                        shape="exclamation-triangle"
                        class="tip-icon-medium"
                        size="30"></clr-icon>
                    <span
                        >{{ 'VULNERABILITY.OVERALL_SEVERITY' | translate }}
                        <span class="font-weight-600">{{
                            'VULNERABILITY.SEVERITY.MEDIUM'
                                | translate
                                | titlecase
                        }}</span></span
                    >
                </ng-template>
                <ng-template [ngSwitchCase]="3">
                    <clr-icon
                        shape="play"
                        class="tip-icon-low rotate-90"
                        size="28"></clr-icon>
                    <span
                        >{{ 'VULNERABILITY.OVERALL_SEVERITY' | translate }}
                        <span class="font-weight-600">{{
                            'VULNERABILITY.SEVERITY.LOW' | translate | titlecase
                        }}</span></span
                    >
                </ng-template>
                <ng-template [ngSwitchCase]="2">
                    <clr-icon
                        shape="help"
                        size="24"
                        class="help-icon"></clr-icon>
                    <span
                        >{{ 'VULNERABILITY.OVERALL_SEVERITY' | translate }}
                        <span class="font-weight-600">{{
                            'VULNERABILITY.SEVERITY.UNKNOWN'
                                | translate
                                | titlecase
                        }}</span></span
                    >
                </ng-template>
                <ng-template [ngSwitchCase]="1">
                    <clr-icon
                        shape="check-circle"
                        class="is-success"
                        size="32"></clr-icon>
                    <span>{{
                        'VULNERABILITY.NO_VULNERABILITY' | translate
                    }}</span>
                </ng-template>
            </div>
            <hr />
            <div>
                <span class="bar-tooltip-font bar-tooltip-font-title">{{
                    tipTitle
                }}</span>
            </div>
            <div class="bar-summary bar-tooltip-fon">
                <div *ngIf="hasHigh" class="bar-summary-item">
                    <span
                        ><clr-icon
                            shape="exclamation-circle"
                            class="is-error"
                            size="24"></clr-icon
                    ></span>
                    <span>{{ highCount }}</span
                    ><span
                        >{{ getPackageText(highCount) | translate }}
                        {{ haveText(highCount) | translate }}
                        {{ 'VULNERABILITY.SEVERITY.HIGH' | translate }}
                        {{ unitText(highCount) | translate }}</span
                    >
                </div>
                <div *ngIf="hasMedium" class="bar-summary-item">
                    <span
                        ><clr-icon
                            *ngIf="hasMedium"
                            shape="exclamation-triangle"
                            class="tip-icon-medium"
                            size="22"></clr-icon
                    ></span>
                    <span>{{ mediumCount }}</span
                    ><span
                        >{{ getPackageText(mediumCount) | translate }}
                        {{ haveText(mediumCount) | translate }}
                        {{ 'VULNERABILITY.SEVERITY.MEDIUM' | translate }}
                        {{ unitText(mediumCount) | translate }}</span
                    >
                </div>
                <div *ngIf="hasLow" class="bar-summary-item">
                    <span
                        ><clr-icon
                            shape="play"
                            class="tip-icon-low rotate-90"
                            size="20"></clr-icon
                    ></span>
                    <span>{{ lowCount }}</span
                    ><span
                        >{{ getPackageText(lowCount) | translate }}
                        {{ haveText(lowCount) | translate }}
                        {{ 'VULNERABILITY.SEVERITY.LOW' | translate }}
                        {{ unitText(lowCount) | translate }}</span
                    >
                </div>
                <div *ngIf="hasUnknown" class="bar-summary-item">
                    <span><clr-icon shape="help" size="18"></clr-icon></span>
                    <span>{{ unknownCount }}</span
                    ><span
                        >{{ getPackageText(unknownCount) | translate }}
                        {{ haveText(unknownCount) | translate }}
                        {{ 'VULNERABILITY.SEVERITY.UNKNOWN' | translate }}
                        {{ unitText(unknownCount) | translate }}</span
                    >
                </div>
                <div *ngIf="hasNone" class="bar-summary-item">
                    <span
                        ><clr-icon
                            shape="check-circle"
                            class="is-success"
                            size="24"></clr-icon
                    ></span>
                    <span>{{ noneCount }}</span
                    ><span>{{
                        'VULNERABILITY.SEVERITY.NONE' | translate
                    }}</span>
                </div>
            </div>
            <div>
                <span class="bar-scanning-time"
                    >{{ 'VULNERABILITY.CHART.SCANNING_TIME' | translate }}
                </span>
                <span>{{
                    completeTimestamp | harborDatetime: 'MM/dd/y HH:mm:ss'
                }}</span>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
</div>
